<template>
	<view>
		<cu-custom bgColor="bg-blue" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">交接班</block>
		</cu-custom>
		<view class="selectList">
			<view class="btn" :class="chooseIndex==0?'active':''" @click="btnChange(0)">交接提交</view>
			<view class="btn" :class="chooseIndex==1?'active':''" @click="btnChange(1)">我提交的</view>
			<view class="btn" :class="chooseIndex==2?'active':''" @click="btnChange(2)">我接收的</view>
		</view>
		<view class="shiftInfo">
			<!-- 交接提交 -->
			<view class="jjSubmit samesubmit" v-if="chooseIndex==0">
				<scroll-view scroll-y="true" :style="style">
					<view class="textInfo">
						<view class="list" @click="getContent(0)">
							<text>交接日期</text>
							<view class="uni-list-cell-db">
								<picker mode="date" :value="date" @change="jjDateChange">
									<view class="uni-input">{{date}}</view>
								</picker>
							</view>
						</view>
						<view class="list" @click="getContent(1)">
							<text>交接人</text>
							<view class="uni-list-cell-db">
								<input type="text" disabled v-model="param.employeeName" placeholder="账号姓名" />
							</view>
						</view>
						<view class="list" @click="getContent(2)">
							<text>新增入院</text>
							<view class="uni-list-cell-db">
								<input type="number" disabled v-model="param.intNum" />
								<text>人</text>
							</view>
						</view>
						<view class="list" @click="getContent(3)">
							<text>新增出院</text>
							<view class="uni-list-cell-db">
								<input type="number" disabled v-model="param.outNum" />
								<text>人</text>
							</view>
						</view>
						<view class="list" @click="getContent(4)">
							<text>新增转院</text>
							<view class="uni-list-cell-db">
								<input type="number" disabled v-model="param.turnNum" />
								<text>人</text>
							</view>
						</view>
					</view>

					<view class="jjMatter">
						<view class="tips" @click="getContent(5)">交接事项</view>
						<view class="matterlist" v-if="haveChange">
							<view class="list" v-for="(item,index) in changeList" :key="index" @click="getItem(item)">
								<view class="topInfo">
									<view class="bed">
										<text>床位：{{item.bedName}}</text>
									</view>
									<view class="name">
										<text class="status" v-if="item.hasOldMan&&!item.outFlag">外出</text>
										<text class="oldman" v-if="item.hasOldMan">长者：{{item.oldManName}}</text>
										<text v-if="!item.hasOldMan">暂无长者入住</text>
									</view>
								</view>
								<view class="bottom-info">
									<textarea v-model="item.desc" type="text" maxlength="100" placeholder="请输入交接事项" />
									<view @click="tankuang(index)" class="uni-input">可选择<text class="lg text-gray cuIcon-right"></text></view>
								</view>
							</view>
						</view>
						<view v-else>
							暂无数据
						</view>
					</view>
				</scroll-view>
				<view class="yuyin-outer" style="padding-top: 20rpx;">
					<view class="yuyin">
						<view class="tips">语音：</view>
						<view class="audio">
							<view @click="playVoice" class="audio-inner">
								<text class="lg text-white cuIcon-notificationfill"></text>
								<text style="margin-left: 12rpx;">{{time}}</text>
								<text v-if="time">"</text>
							</view>
						</view>
					</view>
					<view class="submit-outer">
						<view class="submit">
							<view class="speak">
								<text class="mark">长按说话</text>
								<view class="says" @longpress="startSpeak()" @touchend="stopSpeak()" @click="getContent(6)">
									<image src="../../../static/img/basics/u3382.png" mode=""></image>
								</view>
							</view>
							<button class="tijiao" @click="submits">提交</button>
						</view>
					</view>
				</view>
			</view>
			<!-- 我提交的 -->
			<view class="selfSubmit samesubmit" v-if="chooseIndex==1">
				<view class="sublist" v-for="(item,index) in mySubmitList" :key="index" v-if="isHave">
					<view class="head">
						<image src="../../../static/img/basics/u205.png" mode=""></image>
					</view>
					<view class="detail">
						<view  @click="readSubmit(item)">
						<view class="info">
							<view class="mask">交接日期:{{item.createTime|formatData}}</view>
							<view class="right">{{item.createTime|format}}</view>
						</view>
						<view class="info">
							<view class="mask">新增入院：{{item.intNum}}人</view>
						</view>
						<view class="info">
							<view class="mask">新增出院：{{item.outNum}}人</view>
						</view>
						<view class="info">
							<view class="mask">新增转院：{{item.turnNum}}人</view>
						</view>
						<view class="info">
							<view class="mask">交接事项：{{item.content}}</view>
						</view>
						</view>
						<view class="info" v-if="item.videoTime" style="margin-top: 12rpx;">
							<view class="mask">语音：</view>
							<view class="audio" @click="readYuYin(item)">
								<view class="audio-inner">
									<text class="lg text-white cuIcon-notificationfill"></text>
									<text style="margin-left: 12rpx;">{{item.videoTime}}</text>
									<text>"</text>
								</view>
							</view>
							<!-- <audio :src="" :poster="" :name="" :author="" :action="" controls></audio> -->
						</view>
					</view>
				</view>
				<view class="no-data" v-if="!isHave">
					暂无数据
				</view>
				<view class="no-data"  v-if="isHave&&showMore">
					{{showMore}}
				</view>
			</view>
			<!-- 我接收的 -->
			<view class="selfRecive samesubmit" v-if="chooseIndex==2">
				<view class="sublist" v-for="(item,index) in myReceiveList" :key="index" v-if="isHave">
					<view class="head">
						<image src="../../../static/img/basics/u205.png" mode=""></image>
					</view>
					<view class="detail">
						<view  @click="readSubmit(item)">
						<view class="info">
							<view class="mask">交接日期:{{item.createTime|formatData}}</view>
							<view class="right">{{item.createTime|format}}</view>
						</view>
						<view class="info">
							<view class="mask">新增入院：{{item.intNum}}人</view>
						</view>
						<view class="info">
							<view class="mask">新增出院：{{item.outNum}}人</view>
						</view>
						<view class="info">
							<view class="mask">新增转院：{{item.turnNum}}人</view>
						</view>
						<view class="info">
							<view class="mask">交接事项：{{item.content}}</view>
						</view>
						</view>
						<view class="info" v-if="item.videoTime" style="margin-top: 12rpx;">
							<view class="mask">语音：</view>
							<view class="audio" @click="readYuYin(item)">
								<view class="audio-inner">
									<text class="lg text-white cuIcon-notificationfill"></text>
									<text style="margin-left: 12rpx;">{{item.videoTime}}</text>
									<text>"</text>
								</view>
							</view>
							<!-- <audio :src="" :poster="" :name="" :author="" :action="" controls></audio> -->
						</view>
					</view>
				</view>
				<view class="no-data" v-if="!isHave">
					暂无数据
				</view>
				<view class="no-data"  v-if="isHave&&showMore">
					{{showMore}}
				</view>
			</view>
		</view>
		<section class="Popup-Page">
				<s-popup custom-class="bottom-popup" position="bottom" v-model="showBottomVisible">
					<view class="popup-inner">
						<view class="popup-tp">
							<view @click="showBottomVisible=false">取消</view>
							<view @click="confirm">确定</view>
						</view>
						<checkbox-group>
							<view class="group-item" v-for="(item,index) in remarkList" :key="index">
								<view class="group-inner" @click="changeRemark(item)">
									{{item.content}}
										<label>
											<checkbox style="transform:scale(0.6)" class='round blue' :class="item.isCheck?'checked':''" :checked="item.isCheck?true:false" value="C"></checkbox>
										</label>
								</view>
							</view>
						</checkbox-group>
					</view>
				</s-popup>
		</section>
	</view>
</template>

<script>
	var recorderManager = uni.getRecorderManager();
	var innerAudioContext = uni.createInnerAudioContext();
	innerAudioContext.autoplay = true;
	var times;
	import sPopup from '../../../components/s-popup/index.vue';
	export default {
		components: {
		  sPopup
		},
		data() {
			return {
				showBottomVisible: false,//弹框
				date:'',//
				param:{
					turnDate:'',//
					employeeId:uni.getStorageSync('employeeId'),//employeeId
					employeeName:uni.getStorageSync('nickname'),//nickname
					content:"",//提交内容
					intNum:"",//新增入院
					outNum:'',//新增出院
					teamId:uni.getStorageSync('teamId'),//teamId
					turnNum:"",//新增转院
					url:""//录音地址
				},
				jjname: '', // 交接人
				innum: 0, //新增入院人数
				outnum: 0, //新增出院人数
				changenum: 0, //新增转院人数
				matterArr: [], //交接事项
				chooseIndex: 0,//选中的下标
				voicePath: '',//录音地址
				uploadUrl: 'https://backend.sunsetcare-mirrortech.com:388/object/putObjectByStream', //文件上传接口
				filename: 'file', //文件参数名
				bucketName: 'mirrortech-test',//
				objectName: '552',//
				thetype: '1598249702680', //时间戳
				changeList:[],			//交接班信息
				remarkList:[] ,//备注
				time:'',//时间
				yuyin:'',//语音
				CustomBar:this.CustomBar,//
				screenHeight:this.screenHeight,//
				desc:'',//当前描述
				checkIndex:'',//選中iddex
				mySubmitList:[] ,//我提交的
				myReceiveList:[],// 我接收的
				page:1,//第几页//
				showMore:'',//暫無更多
				total:'', //总页数
				isHave:true,//空数据,
				haveChange:true
			}
		},
		computed:{
			style(){
				var customBar= this.CustomBar;
				var screenHeight= this.screenHeight;
				var height = screenHeight - customBar-35-190
				var style = `height:${height}px;`;
				return style
			}
		},
		onLoad() {
			this.getNowDate();
			this.handoverRemark();
			this.getPreInfo();
			const self = this;
			recorderManager.onStop(function(res) {
				console.log('recorder stop' + JSON.stringify(res));
				self.voicePath = res.tempFilePath;
				self.uploadVideo(self.voicePath)
			});
			setTimeout(function(){
				this.yuyin = true
			},3000)
		},
		onReachBottom() {
			if(this.chooseIndex==2){
				if(this.page<this.total){
					this.page++;
					this.myReceive();
				}else{
					this.showMore = '暂无更多'
				}
				 console.log(this.page,this.total,999)
			}
			if(this.chooseIndex==1){
				if(this.page<this.total){
					this.page++;
					this.mySubmit();
				}else{
					this.showMore = '暂无更多'
				}
			}
		},
		methods: {
			readYuYin(item){
				if(this.$store.state.state&&this.$store.state.isphone){
					getApp().globalData.TTSSpeaker.stop();
					innerAudioContext.src = item.url;
					innerAudioContext.play();
				}else{
					innerAudioContext.src = item.url;
					innerAudioContext.play();
				}
			},
			readSubmit(item){
				if(this.$store.state.state&&this.$store.state.isphone){
					getApp().globalData.TTSSpeaker.stop();
					getApp().globalData.TTSSpeaker.speak(`交接日期${item.createTime}新增入院${item.intNum}人新增出院${item.outNum}人新增转院${item.turnNum}人交接事项${item.content}`,1);
				}		
			},
			myReceive(){
				let param = {
					page:this.page,
					size:5
				}
				uni.showLoading({
					title: '加载中'
				});
				param.teamId = uni.getStorageSync('teamId')
				this.$http('/care-service/handover/myReceive','get',param).then(res=>{
					if(res.data.code==200){
						this.myReceiveList = this.myReceiveList.concat(res.data.data.records)
						if(this.myReceiveList.length){
							this.isHave = true
						}else{
							this.isHave = false
						}
						this.total = res.data.data.pages
					}
					 uni.hideLoading();
				});
			},
			// GET /handover/mySubmit
			// 我提交的
			mySubmit(){
				let param = {
					page:this.page,
					size:5
				}
				param.teamId = uni.getStorageSync('teamId')
				uni.showLoading({
					title: '加载中'
				});
				this.$http('/care-service/handover/mySubmit','get',param).then(res=>{
					if(res.data.code==200){
						this.mySubmitList = this.mySubmitList.concat(res.data.data.records)
						 this.total = res.data.data.pages
						 if(this.mySubmitList.length){
						 	this.isHave = true
						 }else{
						 	this.isHave = false
						 }
						 
					}
					 uni.hideLoading();
				});
			},
			//切换
			btnChange(e){
				this.showMore = ''
				this.chooseIndex = e;
				this.page = 1;
				this.myReceiveList = []
				this.mySubmitList = []
				this.isHave = true
				switch(e){
					case 0:
						if(this.$store.state.state&&this.$store.state.isphone){
							getApp().globalData.TTSSpeaker.stop();
							getApp().globalData.TTSSpeaker.speak('交接提交',1);
						}	
					break
					case 1:
						if(this.$store.state.state&&this.$store.state.isphone){
							getApp().globalData.TTSSpeaker.stop();
							getApp().globalData.TTSSpeaker.speak(`我提交的`,1);
						}	
						this.mySubmit()
					break
					case 2:
						if(this.$store.state.state&&this.$store.state.isphone){
							getApp().globalData.TTSSpeaker.stop();
							getApp().globalData.TTSSpeaker.speak('我接受的',1);
						}
						this.myReceive()
					break
				}
			},
			
			getItem(item){
				if(item.hasOldMan){
					if(this.$store.state.state&&this.$store.state.isphone){
						getApp().globalData.TTSSpeaker.stop();
						getApp().globalData.TTSSpeaker.speak(`床号${item.bedName}入住的长者姓名：${item.oldManName}，可在下方输入交接备注事项或选择交接备注事项后进行提交。`,1);
					}
				}else{
					if(this.$store.state.state&&this.$store.state.isphone){
						getApp().globalData.TTSSpeaker.stop();
						getApp().globalData.TTSSpeaker.speak(`床号${item.bedName}目前暂无长者入住，可在下方输入交接备注事项或选择交接备注事项后进行提交。`,1);
					}
				}
			},
			getContent(e){
				switch(e){
					case 0:
						if(this.$store.state.state&&this.$store.state.isphone){
							getApp().globalData.TTSSpeaker.stop();
							getApp().globalData.TTSSpeaker.speak(`交接日期`,1);
						}	
					break;
					case 1:
						let employeeName = this.param.employeeName
						if(this.$store.state.state&&this.$store.state.isphone){
							getApp().globalData.TTSSpeaker.stop();
							getApp().globalData.TTSSpeaker.speak(`交接人${employeeName}`,1);
						}	
					break;
					case 2:
						let intNum = this.param.intNum
						if(this.$store.state.state&&this.$store.state.isphone){
							getApp().globalData.TTSSpeaker.stop();
							getApp().globalData.TTSSpeaker.speak(`新增入院${intNum}人`,1);
						}	
					break;
					case 3:
						let outNum = this.param.outNum
						if(this.$store.state.state&&this.$store.state.isphone){
							getApp().globalData.TTSSpeaker.stop();
							getApp().globalData.TTSSpeaker.speak(`新增出院${outNum}人`,1);
						}	
					break;
					case 4:
						let turnNum = this.param.turnNum
						if(this.$store.state.state&&this.$store.state.isphone){
							getApp().globalData.TTSSpeaker.stop();
							getApp().globalData.TTSSpeaker.speak(`新增转院${turnNum}人`,1);
						}	
					break;
					case 5:
						if(this.$store.state.state&&this.$store.state.isphone){
							getApp().globalData.TTSSpeaker.stop();
							getApp().globalData.TTSSpeaker.speak(`交接事项`,1);
						}	
					break;
					case 6:
							if(this.$store.state.state&&this.$store.state.isphone){
								getApp().globalData.TTSSpeaker.stop();
								getApp().globalData.TTSSpeaker.speak(`请语音告诉我们您所要交接的事项，便于您的接班人及时处理，谢谢。`,1);
							}	
					break;	
				}
			},
			// changeList
			submits(){
				 let length = this.changeList.length;
				// 添加
				for(let item of this.changeList){
					item.information = ''
					if(item.desc){
						if(item.hasOldMan){
							item.information = item.bedName+','+item.oldManName +','+item.desc
						}else{
							item.information = item.bedName+','+item.desc
						}
					}else{
						if(item.hasOldMan){
							item.information = item.bedName+','+item.oldManName
						}else{
							item.information = item.bedName
						}
					}
				}
				 let desc = ''
				 // 获取整体信息
				 for(let i = 0 ;i<length;i++){
					 desc+= this.changeList[i].information
					 if(i<length){
						  desc=desc+','
					 }
				 }
				 this.param.turnDate = this.date;
				 this.param.content = desc;
				 this.param.url = this.voicePath;
				 this.param.videoTime = this.time;
				 this.$http('/care-service/handover/submit','post',this.param).then(res=>{
				 	console.log(res,9999)
					if(res.data.code==200){
						if(this.$store.state.state&&this.$store.state.isphone){
								if(this.$store.state.state&&this.$store.state.isphone){
									getApp().globalData.TTSSpeaker.stop();
									getApp().globalData.TTSSpeaker.speak(`提交成功`,1);
								}
								this.btnChange(1);
								this.time = ''
						}else{
							uni.showToast({
							    title: '提交成功',
							    duration: 2000,
								icon:'none'
							});
							this.time = ''
							this.btnChange(1);
						}
				 	}
				 });
			},
			playVoice(){
				if (this.voicePath) {
					innerAudioContext.src = this.voicePath;
					innerAudioContext.play();
				}
			},
			changeRemark(item){
				if(this.$store.state.state&&this.$store.state.isphone){
					getApp().globalData.TTSSpeaker.stop();
					getApp().globalData.TTSSpeaker.speak(`${item.content}`,1);
				}
				item.isCheck=!item.isCheck
				
			},
			tankuang(index){
				for(let item of this.remarkList){
					item.isCheck = false
				}
				this.showBottomVisible = true;
				this.checkIndex = index
			},
			confirm(){
				let desc = '';
				this.showBottomVisible = false;
				for(let item of this.remarkList){
					if(item.isCheck==true){
						desc += item.content;
						desc += ','
					}
				}
				desc = desc.substr(0, desc.length - 1);
				this.desc = desc
				// 	//当前list
				for(let i = 0; i<this.changeList.length;i++){
					this.changeList[this.checkIndex].desc = this.desc;
				}
			},
			// GET /handoverRemark/
			handoverRemark(){
				let param = {}
				this.$http('/care-service/handoverRemark/list','get',param).then(res=>{
					if(res.data.code==200){
						this.remarkList = res.data.data
					}
				});
			},
			//交接班信息
			getPreInfo(){
				let param = {}
				param.teamId = uni.getStorageSync('teamId')
				this.$http('/care-service/handover/getPreInfo','get',param).then(res=>{
					if(res.data.code==200){
						let changeList = res.data.data.bedList
						this.haveChange = true
						if(changeList.length<1){
							this.haveChange = false
						}else{
							this.haveChange = true
						}
						for(let item of changeList){
							item.desc = ''
						}
						this.param.intNum = res.data.data.inNum
						this.param.outNum = res.data.data.outNum
						this.param.turnNum = res.data.data.turnNum
						this.changeList = changeList
					}
				});
			},
			handover(){
				// {
				//   "content": "string",
				//   "employeeId": 0,
				//   "employeeName": "string",
				//   "id": 0,
				//   "intNum": 0,
				//   "outNum": 0,
				//   "teamId": 0,
				//   "turnDate": "2020-12-02",
				//   "turnNum": 0,
				//   "url": "string"
				// }
				let param = {}
				param.teamId = uni.getStorageSync('teamId')
				this.$http('/care-service/service/getTopNum','get',param).then(res=>{
					if(res.data.code==200){
						
					}
				});
			},
			addZero(ele){
				if(ele.toString().length==1){
					ele = '0'+ele;
				}
				return ele;
			},
			// 获取当前时间
			getNowDate(){
				let myDate = new Date();
				let year = myDate.getFullYear();
				let month = this.addZero(myDate.getMonth()+1);
				let day = this.addZero(myDate.getDate());
				this.date = year+'-'+month+'-'+day;
			},
			
			//长按说话
			startSpeak(){
				var _that = this;
				uni.vibrateLong({
				    success: function () {
						_that.time = 1;
				        recorderManager.start();
						times = setInterval(function(){
							_that.time ++;
						},1000)
					}
				});
				
			},
			//说话结束
			stopSpeak(){
				if (typeof times != 'undefined') {
					clearInterval(times);
				}
				recorderManager.stop();
				// console.log(this.voicePath,'333')
			},
			//交接日期
			jjDateChange(e){
				this.date = e.detail.value
				 console.log(e)
			},
			//选择交接事项
			uploadVideo: function(data) {
				let sarr = data.split('/');
				const strs = sarr[sarr.length-1];
				const that = this;
				uni.uploadFile({
					url: that.uploadUrl + '?bucketName=' + that.bucketName + '&objectName=' + strs + '&theType=' + that.thetype +
						'&fileType=4' + '&url=' + data,
					filePath: data,
					name: 'file',
					formData: {
						file: data
					},
					success: function(res) {
						
						let data = JSON.parse(res.data);
						if(data.code == 200){
							that.voicePath = data.data.data;//获取线上录音地址
						}
					},
					fail: function(res) {
						console.log(res,'失败')
					},
					complete: function(res) {
						console.log(res,'完成')
						
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	@import  './index.scss';
	
</style>
